<!-- 提现 -->
<template>
	<view class="draw-money-wrap">
		<view class="head-box">
			<shopro-navbar :background="{ background: 'none' }" :backTextStyle="{ color: '#fff' }" backText="转赠" backIconColor="#fff"></shopro-navbar>
			<!-- 可转赠 -->
			<view class="wallet-num-box u-flex u-col-center u-row-between">
				<view class="">
					<view class="num-title">奖励积分</view>
					<view class="wallet-num">{{ userInfo.money || '0.00' }}</view>
				</view>
			</view>
		</view>
		<!-- 提现输入卡片-->
		<view class="draw-card">
			<view class="card-title">转赠积分</view>
			<view class="input-box u-flex u-col-center">
				<input class="u-flex-1 u-p-l-10" type="number" v-model="form.zz_money"  placeholder="请输入转赠积分" />
			</view>
			<view class="card-title">转出账号</view>
			<view class="input-box u-flex u-col-center">
				<input class="u-flex-1 u-p-l-10" type="number" disabled v-model="userInfo.mobile"  placeholder="请输入转出账号" />
			</view>
			<view class="card-title">接受账号</view>
			<view class="input-box u-flex u-col-center">
				<input class="u-flex-1 u-p-l-10" type="number" @input="mobileInput($event, form.zj_money)" v-model="form.zj_mobile" placeholder="请输入接受账号" />
			</view>
			<view class="card-title">验证码</view>
			<view class="input-box u-flex u-col-center">
				<input class="u-flex-1 u-p-l-10" type="number" v-model="form.code" placeholder="请输入验证码" />
				<button class="u-reset-button code-btn code-btn-start"
					:disabled="!form.isMobileEnd"
					:class="{ 'code-btn-end': form.isMobileEnd }"
					@tap="getSmsCode('changemobile')">
					{{ codeText }}
				</button>
			</view>
			<button class="u-reset-button save-btn" @tap="submit">提交</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import FormValidate from '@/shopro/validate/form';
export default {
	components: {},
	data() {
		return {
			labelStyle: {
				'font-size': '30rpx',
				'font-weight': '500',
				color: '#333'
			},
			placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
			form: {
				zz_money:'',//转赠金额
				zj_mobile:'',//转赠手机号
				code:'',//验证码
				isMobileEnd: false // 手机号输入完毕
			},
			codeText: "获取验证码",
			disabledCode: false,
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		// 手机号是否输入完毕
		mobileInput(e, key) {
			this.form.isMobileEnd = this.$u.test.mobile(
				this.form.zj_mobile
			);
		},
		// 获取短信验证码
		getSmsCode(type) {
			const that = this;
			if (!this.form.zz_money) {
				this.$u.toast('请输入转赠积分');
				return;
			}
			if (that.form.isMobileEnd && !that.disabledCode) {
				that.$http(
					"common.smsSend",
					{
						mobile: that.form.zj_mobile,
						event: type
					},
					"获取验证码中..."
				).then(res => {
					if (res.code === 1) {
						that.codeChange();
						that.$u.toast("验证码已发送，请注意查收短信");
					} else {
						that.$u.toast(res.msg);
					}
				});
			} else {
				that.$u.toast("请稍后再试");
			}
		},
		
		// 倒计时
		codeChange() {
			if (this.disabledCode) return;
			this.disabledCode = true;
			let n = 60;
			this.codeText = n + "s";
			const run = setInterval(() => {
				n -= 1;
				if (n < 0) {
					clearInterval(run);
				}
				this.codeText = n + "s";
				if (this.codeText < 0 + "s") {
					this.disabledCode = false;
					this.codeText = "重新获取";
				}
			}, 1000);
		},
		// 审核
		submit() {
			const that = this;
			if (!this.form.zz_money) {
				this.$u.toast('请输入转赠积分');
				return;
			}
			if (!this.form.zj_mobile) {
				this.$u.toast('请输入转赠手机号');
				return;
			}
			if (!this.form.code) {
				this.$u.toast('请输入验证码');
				return;
			}
			that.$http(
				"money.zz_money",
				{
					zz_money: that.form.zz_money,
					zj_mobile: that.form.zj_mobile,
					code:that.form.code,
					event: 'zz'
				},
				"提交中..."
			).then(res => {
				if (res.code === 1) {
					this.$Router.replace({ path: '/pages/user/wallet/index'})
				} else {
					that.$u.toast(res.msg);
				}
			});
		}
	}	
};
</script>

<style lang="scss">
.head-box {
	background: url($IMG_URL+'/imgs/user/draw_money_head_bg.png') no-repeat;
	background-size: 100% auto;
	min-height: 400rpx;
	padding-bottom: var(--status-bar-height);
	// 可提现
	.wallet-num-box {
		padding: 20rpx 40rpx 0;
		.num-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 20rpx;
		}
		.wallet-num {
			font-size: 60rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.log-btn {
			width: 170rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: rgba(255, 255, 255, 0.1);
			border: 1rpx solid #eeeeee;
			border-radius: 30rpx;
			padding: 0;
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}

}
.draw-money-wrap{
	.code-btn[disabled] {
		background-color: #fff;
	}
	
	.code-btn-start {
		width: 160rpx;
		line-height: 56rpx;
		border: 1rpx solid #e9b766;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #e9b766;
		opacity: 0.5;
	}
	.code-btn-end {
			opacity: 1 !important;
		}
}
// 提现输入卡片
.draw-card {
	background-color: #fff;
	border-radius: 20rpx;
	width: 690rpx;
	min-height: 530rpx;
	margin: -70rpx auto 0;
	padding: 30rpx;
	.card-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 30rpx;
	}
	.input-box {
		width: 624rpx;
		border-bottom: 1rpx solid #eee;
		height: 100rpx;
		margin-bottom: 40rpx;
		.unit {
			font-size: 48rpx;
			color: #333;
		}
	}
	.bank-box {
		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.bank-list {
			.empty-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}

			.sel-box {
				.item-img {
					width: 36rpx;
					height: 36rpx;
				}
				.item-title {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	.bank-info {
		height: 50rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		.bank-info-title {
			width: 500rpx;
		}
		.bind-btn {
			padding: 0 20rpx;
			line-height: 50rpx;
			background: #f5f6f8;
			border-radius: 20rpx;
			color: #999;
		}
	}
	.save-btn {
		width: 616rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: linear-gradient( 90deg, #4495CD 0%, #2D5AFC 100%);
		box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
		border-radius: 43rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
	}
}

</style>
